@import '@native/scss/funcs.less';

#root {
	padding-top: 20px;
	padding-bottom: 20px;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow-y: scroll;
	background: #1e1e1e;
}

#iphone {
	height: calc(2596px / 2);
	width: calc(1300px / 2);
	position: relative;
	margin: 0px auto 0;

	.iphone__device {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 100;
		background: url('../../images/iphone1.png') no-repeat;
		background-size: 100% 100%;
		pointer-events: none;
	}

	.iphone__screen {
		position: absolute;
		z-index: 1;
		left: calc(87px / 2);
		top: calc(80px / 2);
		width: calc(1125px / 2);
		height: calc(2436px / 2);
		background-color: #fff;
		overflow: hidden;
	}

	.iphone__status-bar {
		height: calc(132px / 2);
		position: absolute;
		left: 0;
		right: 0;
		z-index: 100;
		pointer-events: none;

		&.iphone__status-bar--white {
			background: url('../../images/status-bar-white.png') no-repeat;
			background-size: 100% 100%;
		}

		&.iphone__status-bar--black {
			background: url('../../images/status-bar.png') no-repeat;
			background-size: 100% 100%;
		}
	}

	.iphone__home-touch-bar {
		position: absolute;
		z-index: 100;
		height: calc(102px / 2);
		left: 0;
		right: 0;
		bottom: 0;

		&.iphone__home-touch-bar--white {
			background: url('../../images/home-touh-bar-white.png') no-repeat;
			background-size: 100% 100%;
		}

		&.iphone__home-touch-bar--black {
			background: url('../../images/home-touh-bar.png') no-repeat;
			background-size: 100% 100%;
		}
	}

	.iphone__apps {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
	}
}